<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box1">
			
		</div>
		<div class="box2">
			
		</div>
		<div class="box3">
			<div class="box4"></div>
		</div>
	</body>
</html>
<style type="text/css">
	.box1, .box2,.box3{
		width: 200px;
		height: 200px;
	}
	
	/* 相邻的垂直方向外边距会发生重叠现象 */
	/* 兄弟元素间的相邻垂直外边距会取两者之间的较大值 */
	/* 特殊情况：响铃外边距一正一负，取两者的和 */
	/* 父子元素间相邻外边距，子元素会传递给父元素 */
	.box1{
		background-color: #FF0000;
		/* 设置下外边距*/
		margin-bottom: 100px;
	}
	.box2{
		background-color: #7FFFD4;
		/* 设置一个上外边距 */
		margin-top: 100px;
	}
	.box3{
		background-color: #FFFF00;
		margin-top: 50px;
	}
	.box4{
		width: 100px;
		height: 100px;
		background-color: #FAEBD7;
		margin-top: 50px;
	}
</style>
